<template>
	<view class="content">
		<f-navbar title="搜索页" fontColor="#fff" fontSize="34" gradient="linear-gradient(-90deg,#B6359C, #EF0A6A )">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#fff" size="20" />
			</view>
		</f-navbar>
		<view class="contenttopsearch">
			<view class="search_box">
				<view class="search_input">
					<input class="search_we_in" :value="searchvalue" :focus="isfocus" @focus="onfocus" @input="oninput"
						@confirm="onconfirm" @blur="onblur" :placeholder="placeholder"
						placeholder-style="font-size:28rpx; color:#bbb" type="text">
				</view>
				<view class="search_btn" @click="onsearch">搜索</view>
			</view>
		</view>
		<view class="contenttopsearchone"></view>
		<view class="history_one" v-show="isshowhistory">


			<view class="history_box">
				<view class="history_boxtop">
					<view class="history_boxtopL">历史记录</view>
					<view class="history_boxtopR" @click="deletehistory">
						<van-icon name="delete-o" color="#bbb" size="18" />
					</view>
				</view>
				<view class="history">
					<view class="history_item" v-for="(historyitem,historyindex) in historyList" :key="historyindex"
						@click="onhistory(historyitem)">
						{{historyitem}}
					</view>
				</view>
			</view>
			<view class="recommend_box">
				<view class="recommend_title">

					<image class="lineimg" :src="imgurl+'noorder_leftline.png'" mode=""></image>


					<image class="xinicon" :src="imgurl+'noorder_xin.png'" mode=""></image>

					<view class="recommend_txt">为您推荐</view>

					<image class="lineimg" :src="imgurl+'noorder_rightline.png'" mode=""></image>

				</view>
				<view class="info_contentbox">
					<view class="info_content" @click="ondetail(recommentitem)" v-for="(recommentitem,recommentindex) in RecommendList" :key="recommentindex">
						<view class="info_contentimg">
							<image class="info_contentimg1" :src="recommentitem.good_img" mode=""></image>
						</view>
						<view class="info_contenttitle">
							<view class="info_contenttxt">{{recommentitem.title}}</view>
							<van-icon name="arrow" color="#bbb" size="14" />
						</view>
						<view class="info_contentbaioqian" v-if="recommentitem.tags!==''">
							<view class="info_biaoqian" v-for="(tagsitem,tagsindex) in recommentitem.tags" :key="tagsindex">{{tagsitem}}</view>
<!-- 							<view class="info_biaoqian">自营</view>
							<view class="info_biaoqian">自营</view>
							<view class="info_biaoqian">自营</view> -->
						</view>
						<view class="info-dazhe">
							<view class="info-dazheL"> 原价:<text class="info-dazheLicon">￥</text>{{recommentitem.origin_price}}
							</view>
							<view class="info-dazheR">最低价:<text class="info-dazheLicon">￥</text>{{recommentitem.low_price}}
							</view>
						</view>
						<view class="info_bottomprice">现拼单价：<text class="info_bottompriceicon">￥</text><text
								class="price">{{recommentitem.now_price}}</text>
						</view>
						<view class="float_left_icon" v-if="recommentitem.attr_type==2 && recommentitem.is_activity==1">
							{{recommentitem.attr_type_txt}}
						</view>
						<view class="float_right_icon" v-if="recommentitem.attr_type==1 && recommentitem.is_activity==1">
							{{recommentitem.attr_type_txt}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="infobox" v-show="!isshowhistory">
			<view class="infobox_shopimg" v-if="storeobj.length>0">
				<image class="infobox_shopimg" :src="storeobj.logo" mode=""></image>
			</view>
			<view class="infotitlebox">
				<!-- <cx-screen :list="list"></cx-screen> -->
				<view class="infotitle" :class="number==index?'infotitle_active':''" v-for="(item,index) in list"
					:key="index" @click="select(item,index)">
					<view class="flexs">
						<view>{{item.name}}</view>
						<view class="price_jiantou" v-if="item.id=='4' || item.id=='5'">
							<van-icon name="arrow-up" :color="item.upState ? '#ff9a00':'#555555'" size="8" />
							<van-icon name="arrow-down" :color="item.downState ? '#ff9a00':'#555555'" size="8" />
						</view>
					</view>
				</view>

			</view>
			<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight"
				:style="{marginTop:0+'rpx'}" :scroll-top="scrollTop" :refresher-threshold="100"
				:refresher-triggered="triggered" :scroll-with-animation="true">
				<view class="info_contentbox">

					<view class="info_content" v-for="(seaechitem,searchindex) in dataList" :key="searchindex"
						@click="ondetail(seaechitem)">
						<view class="info_contentimg">
							<image class="info_contentimg" :src="seaechitem.good_img" mode=""></image>
						</view>
						<view class="info_contenttitle">
							<view class="info_contenttxt">{{seaechitem.title}}</view>
							<van-icon name="arrow" color="#bbb" size="14" />
						</view>
						<view class="info_contentbaioqian" v-if="seaechitem.tags!==''">
							<view class="info_biaoqian" v-for="(tagsitem,tagsindex) in seaechitem.tags"
								:key="tagsindex">{{tagsitem}}</view>
						</view>
						<view class="info-dazhe">
							<view class="info-dazheL"> 原价:<text
									class="info-dazheLicon">￥</text>{{seaechitem.origin_price}} </view>
							<view class="info-dazheR">最低价:<text class="info-dazheLicon">￥</text>{{seaechitem.low_price}}
							</view>
						</view>
						<view class="info_bottomprice">现拼单价：<text class="info_bottompriceicon">￥</text><text
								class="price">{{seaechitem.now_price}}</text></view>
						<view class="float_left_icon" v-if="seaechitem.attr_type==2 && seaechitem.is_activity==1">
							{{seaechitem.attr_type_txt}}
						</view>
						<view class="float_right_icon" v-if="seaechitem.attr_type==1 && seaechitem.is_activity==1">
							{{seaechitem.attr_type_txt}}
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import hxNavbar from "@/components/hx-navbar/hx-navbar"
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getSearchHistory,
		delSearchHistory,
		getSearchData,
		getRecommendList
	} from '../../utils/app.js'
	export default {
		components: {
			fNavbar,
		},
		data() {
			return {
				list: [{
						id: 1,
						name: '默认'
					},
					{
						id: 2,
						name: '销量'
					},
					{
						id: 3,
						name: '最新'
					},
					{
						id: 4,
						name: '价格',
						upState: false,
						downState: false
					},
				],
				number: 0, // 选择销量价格排行
				imgurl: getApp().globalData.imgurl,
				changetab: 1, // 选择销量价格排行
				placeholder: '三只松鼠',
				isfocus: false,
				isshowhistory: true,
				searchvalue: '',
				changetitle: '1', //选择销量最新价格等
				priceicon: '1', //选择上箭头或者下箭头
				historyList: [], // 搜索历史记录数据
				pages: 1, // 分页数据
				PageSize: 10, // 一页有多少数据
				total: null, // 总条数	
				dataList: [], // 列表数据
				triggered: false, // 设置是否下拉
				scrollTop: 0,
				cityobj: uni.getStorageSync('cityinfo'),
				storeobj: [], // 店铺信息
				RecommendList:[], // 推荐数据
			}
		},
		onLoad() {
			this.isfocus = true
			this.gethistoryList()
			this.getrecommendList()
		},
		methods: {
			// 获取推荐数据
			getrecommendList(){
				getRecommendList({
					region_code: uni.getStorageSync('cityinfo').region_code
				}).then(res => {
					console.log(res);
					this.RecommendList = res.data
					// this.SystemCateList = res.data
					// this.getSystemBanner(this.active)
					// this.getHomeData(true)
					// this.dataList = res.data
				
				})
			},
			// 点击搜索历史记录
			onhistory(item) {
				this.searchvalue = item
				this.isshowhistory = false
				this.getList(true, this.changetab)
			},
			// 跳转到详情页
			ondetail(e) {
				console.log(e);
				if (e.attr_type == 1) {
					uni.navigateTo({
						url: '/pages/subPack/Storeproducts/Storeproducts?storeid=' + e.store_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/goodsDetail/goodsDetail?codeid=' + e.code
					})
				}
			},
			// 获取数据
			getList(isPullDownRefresh, sort) {
				let currPage = 1
				if (!isPullDownRefresh) {
					currPage = this.pages + 1
				} else {
					currPage = 1
				}
				getSearchData({
					region_code: this.cityobj.region_code,
					keywords: this.searchvalue,
					sort: sort,
					page: currPage
				}).then(res => {
					console.log(res);
					this.storeobj = res.data.store_item
					if (res.code == 1) {

						uni.hideToast()
						const newdata = res.data.list
						if (isPullDownRefresh) {
							this.dataList = newdata
							this.triggered = false
						} else {
							this.dataList = [...this.dataList, ...newdata]
						}
						console.log(this.dataList);
						this.pages = res.data.page.current
						console.log(this.pages);
					}
				})
			},

			//触底加载
			lowerBottom() {
				// 判断是否还有下一页数据
				// if (this.pages * this.PageSize >= this.total) return person.showMoreData = true
				// 让页码值自增 +1
				// console.log('999');
				// this.pages += 1
				// 重新获取列表数据
				this.getList(false, this.changetab)
			},
			// 下拉刷新
			getFresh() {
				this.triggered = true,
					this.getList(true, this.changetab)

			},
			// 删除历史记录
			deletehistory() {
				delSearchHistory({

				}).then(res => {
					this.gethistoryList()

				})
			},
			// 获取历史数据
			gethistoryList() {
				getSearchHistory({

				}).then(res => {
					console.log(res);
					this.historyList = res.data

				})
			},
			select(item, i) {
				console.log(item, i);
				this.number = i
				this.getList(true, item.id)
				if (item.id == '4') {
					this.list[3].upState = !this.list[3].upState
					this.list[3].id = '5'
					this.list[3].downState = false

				} else if (item.id == '5') {
					this.list[3].upState = false
					this.list[3].id = '4'
					this.list[3].downState = !this.list[3].downState

				} else {
					this.list[3].upState = false
					this.list[3].downState = false

				}
			},

			change(e) {
				console.log(e);
				this.changetitle = e
			},
			oninput(e) {
				this.searchvalue = e.detail.value

			},
			onsearch() {
				console.log(11);
				if (this.searchvalue.length != 0) {
					this.isshowhistory = false
				}
				this.getList(true, this.changetab)
				// else{
				// 	this.isshowhistory = true
				// }


			},
			onfocus(e) {
				console.log(e.detail.value.length);
				if (e.detail.value.length > 0) {
					this.isshowhistory = true
				}
			},
			onconfirm(e) {
				console.log(e.detail.value.length);
				if (e.detail.value.length != 0) {
					this.isshowhistory = false
				}

			},
			onblur(e) {
				console.log(e);
				this.isfocus = false
			},
		}
	}
</script>

<style>
	page {
		background: #eeeeee;
	}

	.contenttopsearch {
		width: 100%;
		height: 108rpx;
		background: linear-gradient(to left, #B6359C, #EF0A6A);
		display: flex;
		align-items: center;
		justify-content: center;
		/* position: fixed; */
		z-index: 999;
		position: fixed;
	}

	.contenttopsearchone {
		height: 108rpx;
	}

	.scrollHeight {
		height: 77vh;
	}

	.search_box {
		width: 690rpx;
		height: 65rpx;
		background: #FFFFFF;
		border: 1rpx solid #EF0E6C;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		overflow: hidden;

	}

	.flexs {
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.search_input {
		width: 568rpx;
		height: 65rpx;
		position: relative;

	}

	.search_we_in {
		width: 560rpx;
		height: 65rpx;
		font-size: 28rpx;
		padding-left: 89rpx;
		box-sizing: border-box;
	}

	.search_we_in::before {
		content: '';
		width: 36rpx;
		height: 36rpx;
		background: url(../../static/imgs/search_icon.png) no-repeat;
		background-size: contain;
		position: absolute;
		left: 29rpx;
		top: 50%;
		transform: translateY(-50%);
	}

/* 	.search_we_in::after {
		content: '';
		width: 32rpx;
		height: 29rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/camera.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	} */

	.search_btn {
		width: 125rpx;
		height: 65rpx;
		background: #EF0E6C;
		/* 		border-top-right-radius: 32rpx;
			border-bottom-right-radius: 32rpx; */
		text-align: center;
		line-height: 65rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
	}

	.searchbox {
		width: 100%;
		height: 108rpx;
	}

	.history_box {
		width: 690rpx;
		/* height: 136rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 4rpx;
		overflow: hidden;
		padding-bottom: 20rpx;


	}

	.history_boxtop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.history_boxtopL {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 22rpx;
	}

	.history_boxtopR {
		/* 	width: 24rpx;
		height: 26rpx; */
		/* background: #BBBBBB; */
		margin-right: 32rpx;
	}

	.history {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 22rpx;
		margin-top: 24rpx;
	}

	.history_item {
		height: 50rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		padding: 13rpx 30rpx;
		background: #EEEEEE;
		border-radius: 25rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		white-space: nowrap;
		/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/*隐藏部分以省略号代替*/
	}

	.infobox_shopimg {
		width: 690rpx;
		height: 391rpx;
		background: #FBFBFB;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.infotitlebox {
		width: 750rpx;
		height: 105rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.infotitle {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		display: flex;
		align-items: center;
		/* line-height: 105rpx; */
	}

	.infotitle:first-child {
		margin-left: 31rpx;
	}

	.infotitle:last-child {
		margin-right: 31rpx;
		display: flex;
	}

	.price_jiantou {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 11rpx;
	}

	.infotitle_active {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF9A00;
	}

	.topicon {
		font-size: 22rpx;
		color: #FF9A00;
	}

	.bottomicon {
		width: 17rpx;
		font-size: 22rpx;
		color: #555;
	}

	.info_contentbox {
		width: 690rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 21rpx;

	}

	.info_content {
		width: 335rpx;
		/* height: 490rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 21rpx;
		margin-right: 20rpx;
		padding-bottom: 18rpx;
		position: relative;
	}

	.info_content:nth-child(2n) {
		margin-right: 0;
	}

	.info_contentimg {
		width: 335rpx;
		height: 296rpx;
		/* background: blue; */
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}

	.info_contenttitle {
		width: 335rpx;
		margin-top: 20rpx;
		margin-left: 21rpx;
		display: flex;
		align-items: center;

	}

	.info_contenttxt {
		width: 260rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 20rpx;
	}

	.info_contentbaioqian {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}

	.info_biaoqian {
		font-size: 22rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		background: #EE0E6B;
		border-radius: 5rpx;
		padding: 3rpx 5rpx;
		text-align: center;
		margin-right: 5rpx;
	}

	.info-dazhe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.info-dazheL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		line-height: 24rpx;
	}

	.info-dazheR {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF5A00;
		line-height: 24rpx;
	}

	.info-dazheLicon {
		font-size: 14rpx
	}

	.info_bottomprice {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 24rpx;
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.info_bottompriceicon {
		font-size: 20rpx;
		font-weight: 700;
	}

	.price {
		font-size: 28rpx;
		font-weight: 700;
	}

	/* 固定上边的小图标 */
	.float_left_icon {
		width: 121rpx;
		height: 56rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/danpinPT.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}

	.float_right_icon {
		width: 121rpx;
		height: 56rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/dianpuPT.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
	.recommend_title {
		height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 38rpx;
	}
	
	.recommend_line {
		width: 90rpx;
		height: 20rpx;
		/* background: pink; */
	}
	
	.lineimg {
		width: 81rpx;
		height: 10rpx;
		/* vertical-align: middle; */
	}
	
	.xinicon {
		width: 19rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}
	
	.recommend_hear {
		width: 19rpx;
		height: 19rpx;
		/* background: blue; */
		margin-left: 10rpx;
	}
	
	.recommend_txt {
		/* line-height: 36rpx; */
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: 700;
		color: #EF0E6C;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.recommend_line1 {
		width: 80rpx;
		height: 10rpx;
		/* background: pink; */
	
	}
	
	image {
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}
	
	.info_contentbox {
		width: 690rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 0 auto;
		margin-top: 21rpx;
	}
	
	.info_content {
		width: 335rpx;
		/* height: 490rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 21rpx;
		margin-right: 20rpx;
		padding-bottom: 18rpx;
	}
	
	.info_content:nth-child(2n) {
		margin-right: 0;
	}
	
	.info_contentimg {
		width: 335rpx;
		height: 296rpx;
		/* background: blue; */
		border-radius: 10rpx 10rpx 0rpx 0rpx;
	}
	.info_contentimg1{
		width: 100%;
		height: 100%;
	}
	
	.info_contenttitle {
		width: 335rpx;
		margin-top: 20rpx;
		margin-left: 21rpx;
		display: flex;
		align-items: center;
	
	}
	
	.info_contenttxt {
		width: 260rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 20rpx;
	}
	
	.info_contentbaioqian {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}
	
	.info_biaoqian {
		font-size: 22rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		background: #EE0E6B;
		border-radius: 5rpx;
		padding: 3rpx 5rpx;
		text-align: center;
		margin-right: 5rpx;
	}
	
	.info-dazhe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.info-dazheL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #555555;
		line-height: 24rpx;
	}
	
	.info-dazheR {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF5A00;
		line-height: 24rpx;
	}
	
	.info-dazheLicon {
		font-size: 14rpx
	}
	
	.info_bottomprice {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 24rpx;
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.info_bottompriceicon {
		font-size: 20rpx;
		font-weight: 700;
	}
	
	.price {
		font-size: 28rpx;
		font-weight: 700;
	}
	/* 固定上边的小图标 */
	.float_left_icon {
		width: 121rpx;
		height: 56rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/danpinPT.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
	
	.float_right_icon {
		width: 121rpx;
		height: 56rpx;
		background: url(https://yuanchubao.oss-cn-beijing.aliyuncs.com/dianpuPT.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 56rpx;
		text-align: center;
	}
</style>